import 'package:aidou/style/style.dart';
import 'package:aidou/widgets/common/dialog.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class LivePreview extends StatefulWidget {
  final Function onStartPush;
  const LivePreview({
    Key? key,
    required this.onStartPush,
  }) : super(key: key);

  @override
  LivePreviewState createState() => LivePreviewState();
}

class LivePreviewState extends State<LivePreview> {
  DateTime liveStartTime = DateTime(2022, 6, 17, 20, 0);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        padding: EdgeInsets.only(
          // top: MediaQuery.of(context).padding.top - ScreenUtil().setWidth(20),
          top: ScreenUtil().setWidth(20),
          left: ScreenUtil().setWidth(20),
          right: ScreenUtil().setWidth(20),
          bottom: ScreenUtil().setWidth(40),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            IconButton(
              onPressed: () {
                Navigator.pop(context);
              },
              iconSize: ScreenUtil().setWidth(64),
              icon: Icon(Icons.close),
              color: Colors.white,
            ),
            LiveBasicInfo(),
            Expanded(
              child: Container(),
            ),
            LiveStting(context),
            startLiveButton(),
          ],
        ),
      ),
    );
  }

  // 直播基本信息
  Widget LiveBasicInfo() {
    return Padding(
        padding: EdgeInsets.all(ScreenUtil().setWidth(40)),
        child: Container(
          padding: EdgeInsets.all(ScreenUtil().setWidth(20)),
          decoration: BoxDecoration(
            color: Color.fromRGBO(0, 0, 0, .5),
            borderRadius:
                BorderRadius.all(Radius.circular(ScreenUtil().setWidth(16))),
          ),
          child: Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(ScreenUtil().setWidth(16)),
                child: Image.network(
                  'https://guangbei-video.obs.cn-east-3.myhuaweicloud.com/images/20211102/93c901fac44a47cb92261da4fbba6c6e.png',
                  width: ScreenUtil().setWidth(136),
                  height: ScreenUtil().setWidth(136),
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                height: ScreenUtil().setWidth(136),
                padding: EdgeInsets.only(left: ScreenUtil().setWidth(20)),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    InkWell(
                      child: Text(
                        '离开全世界1正在直播',
                        style: TextStyle(
                          fontSize: ScreenUtil().setWidth(40),
                          color: Colors.white,
                        ),
                      ),
                      onTap: () {
                        setLiveParams('title');
                      },
                    ),
                    InkWell(
                      child: Text(
                        '会议时间：立即开始',
                        style: TextStyle(color: Colors.white),
                      ),
                      onTap: () {
                        showCupertinoModalPopup<void>(
                          context: context,
                          builder: (BuildContext context) => Container(
                            height: 400.w,
                            padding: const EdgeInsets.only(top: 6.0),
                            // The Bottom margin is provided to align the popup above the system navigation bar.
                            margin: EdgeInsets.only(
                              bottom: MediaQuery.of(context).viewInsets.bottom,
                            ),
                            // Provide a background color for the popup.
                            color: CupertinoColors.systemBackground
                                .resolveFrom(context),
                            // Use a SafeArea widget to avoid system overlaps.
                            child: SafeArea(
                              top: false,
                              child: CupertinoDatePicker(
                                initialDateTime: liveStartTime,
                                use24hFormat: true,
                                minuteInterval: 10,
                                onDateTimeChanged: (DateTime newDateTime) {
                                  setState(() {
                                    print(newDateTime);
                                    liveStartTime = newDateTime;
                                  });
                                },
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ));
  }

  // 直播设置
  Widget LiveStting(context) {
    return Padding(
      padding: EdgeInsets.only(bottom: ScreenUtil().setWidth(100.0)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _IconButton(
            text: '翻转',
            icon: Icons.flip_camera_ios_outlined,
            onTap: () {
              print('翻转');
            },
          ),
          _IconButton(
            text: '公告',
            icon: Icons.announcement,
            onTap: setLiveNotice,
          ),
          _IconButton(
            text: '密码',
            icon: Icons.lock_outline,
            onTap: () {
              setLiveParams('password');
            },
          ),
          _IconButton(
            text: '美颜',
            icon: Icons.blur_linear_outlined,
            onTap: () {
              print('美颜');
            },
          ),
        ],
      ),
    );
  }

  // 设置直播公告
  void setLiveNotice() {
    showDialog(
      context: context,
      builder: (BuildContext contenxt) => CustomDialog(
        title: '直播公告',
        content: Container(
          constraints: BoxConstraints(minHeight: 220.w, maxHeight: 220.w),
          child: TextField(
            maxLines: null,
            expands: true,
            style: TextStyle(
              fontSize: 30.sp,
              height: 1.5,
            ),
            decoration: InputDecoration(
              hintText: '请输入直播公告',
              filled: true,
              fillColor: ColorPlate.back3,
              contentPadding: EdgeInsets.all(20.w),
              isCollapsed: true,
              border: OutlineInputBorder(),
            ),
          ),
        ),
        confirmCallback: () {
          print('设置完成');
        },
      ),
    );
  }

  // 设置直播密码
  // type 设置类型 password: 密码 title: 标题
  void setLiveParams(type) {
    showDialog(
      context: context,
      builder: (BuildContext contenxt) => CustomDialog(
        title: type == 'password' ? '直播密码' : '直播标题',
        content: TextField(
          style: TextStyle(
            fontSize: 30.sp,
            height: 1.5,
          ),
          obscureText: type == 'password',
          decoration: InputDecoration(
            hintText: type == 'password' ? '请输入直播密码' : '请输入直播标题',
            filled: true,
            fillColor: ColorPlate.back3,
            contentPadding: EdgeInsets.all(20.w),
            isCollapsed: true,
            border: OutlineInputBorder(),
          ),
          inputFormatters: [
            LengthLimitingTextInputFormatter(type == 'password' ? 8 : 20),
          ],
        ),
        confirmCallback: () {
          print('设置完成');
        },
      ),
    );
  }

  // 创建直播
  Widget startLiveButton() {
    return Center(
      child: ElevatedButton(
        child: Text('创建直播'),
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(Colors.red),
          minimumSize: MaterialStateProperty.all(Size(
            ScreenUtil().setWidth(580),
            ScreenUtil().setWidth(80),
          )),
        ),
        onPressed: () {
          widget.onStartPush();
        },
      ),
    );
  }
}

// 图标按钮小部件
class _IconButton extends StatelessWidget {
  final String? text;
  final IconData icon;
  final Function()? onTap;
  const _IconButton({
    Key? key,
    this.text,
    required this.icon,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkResponse(
      child: Column(
        children: [
          Text(
            text ?? '??',
            style: TextStyle(
              color: Colors.white,
              fontSize: ScreenUtil().setWidth(36),
            ),
          ),
          SizedBox(height: ScreenUtil().setWidth(10)),
          Icon(
            icon,
            color: Colors.white,
            size: ScreenUtil().setWidth(60),
          ),
        ],
      ),
      onTap: onTap,
    );
  }
}
